<template>
	<view class="sensitiveWords_container">
		<view class="text_container">
			<view class="text_title">
				检测内容
			</view>
			<u-input v-model="msg" type="textarea" :height="500" :border="true" :auto-height="true" />
		</view>
		<u-toast ref="uToast" />
		<view class="content_container" v-if="result.num > 0">
			<view class="tip">
				该内容中存在 <text>{{result.num}}</text> 个敏感词
			</view>
			<u-tag class="item_tag" :text="item" type="error" shape="circle" v-for="(item,index) in result.list"
				:key="index" />
		</view>
		<view class="content_container" v-if="result.num == 0">
			<view class="tip">
				该内容中不存在敏感词
			</view>
		</view>
		<view class="test_btn">
			<button type="primary" class="shadow-blur bg-gradual-blue" @click="getList()">立即检测</button>
		</view>
	</view>
</template>

<script>
	import {
		getSensitiveWords
	} from "../api/remoteApi.js"
	export default {
		data() {
			return {
				msg: "",
				result: {
					num: -1,
					list: []
				}

			}
		},
		methods: {
			async getList() {
				if (this.msg == "") {
					this.$refs.uToast.show({
						title: '检测内容不能为空哦~',
						type: 'error',
						icon: false,
						position: "top"
					})
					return
				}
				const res = await getSensitiveWords({
					msg: this.msg
				})
				console.log("敏感词", res);
				if (res.code == 200) {
					this.result.num = res.num
					this.result.list = res.data
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.sensitiveWords_container {
		width: 100%;
		height: 100vh;
		padding: 0 20rpx;
		padding-bottom: 160rpx;
		box-sizing: border-box;

		.text_container {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx 30rpx;
			box-sizing: border-box;

			.text_title {
				color: #8799a3;
				font-size: 32rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
			}
		}

		.content_container {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 20rpx;

			.tip {
				margin-bottom: 14rpx;

				text {
					color: red;
					margin: 0 6rpx;
				}
			}

			.item_tag {
				margin: 6rpx;
			}
		}

		.test_btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			button {
				width: 80%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>